<template>
	<el-form :model="formData" :rules="formRules" ref="formRef" label-width="90px" label-position="left">
		<el-form-item label="类　　别：" prop="unitId">
			<el-select v-model="formData.unitId" filterable placeholder="选择类别" style="width: 100%;">
				<el-option v-for="item in unitData" :key="item['id']" :label="item['unitName']" :value="String(item['id'])"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="名　　称：" prop="useUnit">
            <el-input ref="O1" v-model="formData.useUnit" @keyup.enter.native="save('formRef')"></el-input>
        </el-form-item>
        <el-form-item label="连续增加：" style="margin-bottom: 10px;" v-if="!rowId">
            <el-checkbox v-model="continueAdd"></el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="save('formRef')">保存</el-button>
            <el-button type="danger" size="small" @click="close">关闭</el-button>
        </el-form-item>
	</el-form>
</template>
<script>
export default {
	data() {
		return {
			continueAdd: false,		//是否连续新增
			formData: {},			//表单数据
			formRules: {			//校验规则
				unitId: [{required: true, message: '类别不能为空', triggle: 'changge'}],
				useUnit: [{required: true, message: '名称不能为空', triggle: 'blur'}]
			},
			unitData: [],			//类别
			rowId: this.$store.state.meterUnitStore.rowId
		}
	},
	methods: {
		getUpdateData() {			//获取修改的数据
			this.$http.get('measureUnit/selectUnitInfo?id=' + this.rowId).then(res => {
				if(res.data.code == 20001) {
					if(res.data.data) {
						this.formData = res.data.data;
						this.formData['unitId'] = this.formData['unitId'].toString();
					}
				}
			})
		},
		getUnitData() {			//类别数据
			this.$http.get('measureUnit/selectGroup').then(res => {
				if(res.data.code == 20001) {
					if(res.data.data) {
						this.unitData = res.data.data;
					}
				}
			});
		},
		save(formName) {
			this.$refs[formName].validate((valid) => {
                if (valid) {
                	let data = {        //重新组装数据
                        unitId: this.formData['unitId'],
                        useUnit: this.formData['useUnit'],
                        state: this.formData['state'],
                        unitLock: this.formData['unitLock'] ? 1 : 0
                    }
                	if(this.formData['id']) {
                		//修改
                		data['id'] = this.formData['id'];
                		this.$http({
                            method: "post",
                            url: "measureUnit/updateUnit",
                            params: data
                        }).then(res => {
                        	if(res.data.code === 20001) {
                        		this.$message({message: '修改成功', type: 'success', duration: 1500});
                        		setTimeout(() => {
                                    this.$store.dispatch('meterUnitStore/getUnitTableData');
                                    this.close();
                                }, 1000);
                        	}
                        });
                	} else {
						//新增
						this.$http({
							method: 'post',
							url: 'measureUnit/insertUnit',
							params: data
						}).then(res => {
							if(res.data.code == 20001) {
								this.$message({message: '新增成功', type: 'success', duration: 1500});
								setTimeout(() => {
									this.continueAdd ? this.$refs[formName].resetFields() : this.close();
                                    this.$store.dispatch('meterUnitStore/getUnitTableData');
                                }, 1000);
							}
						});
                	}
                }
            });
		},
		close() {           //关闭弹窗
            let index = parent.layer.getFrameIndex(window.name);    //先得到当前iframe层的索引
            parent.layer.close(index);
        },
        enterKey(lastRef, nextRef) {		//回车键换行
            if(lastRef.target.value) {
                this.$refs[nextRef].focus();
            }
        }
	},
	mounted() {
		this.getUnitData();
		if(this.rowId) {
			this.getUpdateData();
		}
	}
}
</script>